<script setup lang="ts">
interface Tab {
  id: string;
  name: string;
}

const props = defineProps<{
  items: Tab[];
}>();

const activeTab = defineModel<Tab>();

const handleTabClick = (tab: Tab) => {
  activeTab.value = tab;
};
</script>

<template>
  <nav class="flex">
    <button
      v-for="tab in items"
      :key="tab.id"
      class="mr-10 pb-4 px-1 relative text-lg text-[#4a4a4a] hover:text-[#000000] transition-colors duration-300"
      :class="{ '!text-[#000000] font-bold': activeTab?.id === tab.id }"
      @click="handleTabClick(tab)"
    >
      {{ tab.name }}
      <div
        v-if="activeTab?.id === tab.id"
        class="absolute bottom-0 left-0 w-full h-[3px] bg-red-700 transition-all duration-300"
      ></div>
    </button>
  </nav>
</template>
